<template>
    <dv-border-box1>
        <div style="text-align: center">
            <div class="title">联网设备</div>
            <div class="box">
                <dv-water-level-pond class="equipments-pond" :config="state.config" />
                <div class="box-list">
                    <div class="box-item" @click="deviceListClick(1, '在线设备')">
                        <div class="num">{{ state.data.online }}</div>
                        <div class="desc">在线设备</div>
                    </div>
                    <div class="box-item" @click="deviceListClick(6, '离线设备')">
                        <div class="num">{{ state.data.downline }}</div>
                        <div class="desc">离线设备</div>
                    </div>
                    <div class="box-item" @click="deviceListClick('', '设备总数')">
                        <div class="num">{{ state.data.device_total }}</div>
                        <div class="desc">联网设备</div>
                    </div>
                </div>
                <div class="box-list">
                    <div class="box-item" @click="yuJingBoBaoList(4, 1)">
                        <div class="num">{{ state.data.method_yujing }}</div>
                        <div class="desc">预警</div>
                    </div>
                    <div class="box-item" @click="yuJingBoBaoList(3, 1)">
                        <div class="num">{{ state.data.method_bj }}</div>
                        <div class="desc">火警</div>
                    </div>
                    <div class="box-item" @click="yuJingBoBaoList(1, 1)">
                        <div class="num">{{ state.data.method_yj }}</div>
                        <div class="desc">监管</div>
                    </div>
                    <div class="box-item" @click="yuJingBoBaoList(2, 1)">
                        <div class="num">{{ state.data.method_gz }}</div>
                        <div class="desc">故障</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 在线设备 -->
        <el-dialog :fullscreen="fullscreen" v-model="state.deviceListDialog" top="3%" :title="state.title" width="70%"
            destroy-on-close @closed="state.deviceMold = ''">
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <EquipmentStatistics :rows="10" :status="state.status" :device-mold="state.deviceMold">
            </EquipmentStatistics>
        </el-dialog>
        <el-dialog :fullscreen="fullscreen" v-model="state.yuJingBoBaoListDialog" width="70%" top="3%" destroy-on-close>
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <yuJingBoBao :yuJingType="state.yuJingType" :yuJingStatus="state.yuJingStatus"> </yuJingBoBao>
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { equipments } from '@/api/dashboard'
import EquipmentStatistics from './components/EquipmentStatistics.vue'
import yuJingBoBao from '@/views/xfSupervise/components/yuJingBoBao.vue'
const state = reactive({
    title: '',
    deviceListDialog: false,
    yuJingBoBaoListDialog: false,
    yuJingType: '',
    yuJingStatus: '',
    status: '',
    deviceMold: '',
    config: {
        data: [],
        shape: 'round',
        waveHeight: 10
    },
    data: {
        online: 0,
        downline: 0,
        device_total: 0,
        method_bj: 0,
        method_yj: 0,
        method_gz: 0,
        method_yujing: 0,
    }
})

let fullscreen = ref(false)

equipments({ is_wxc: 1 }).then((res) => {
    state.config.data.push(+res.data.total.onRate.slice(0, -1))
    state.data.online = +res.data.total.online
    state.data.downline = +res.data.total.downline
    state.data.device_total = +res.data.total.device_total
    state.data.method_bj = +res.data.total.method_bj
    state.data.method_gz = +res.data.total.method_gz
    state.data.method_yj = +res.data.total.method_yj
    state.data.method_yujing = +res.data.total.method_yujing
})

const deviceListClick = (status, title: string) => {
    state.status = status
    state.title = title
    state.deviceListDialog = true
}
const yuJingBoBaoList = (type, status) => {
    state.yuJingType = type
    state.yuJingStatus = status
    state.yuJingBoBaoListDialog = true
}
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    :deep(.border-box-content) {
        display: flex;
        flex-direction: column;
        text-align: start;

        .title {
            color: #edf4ff;
            font-size: 14px;
            height: 20px;
            font-family: 'myFont';
            font-size: 20px;

            img {
                height: 40px;
                margin-top: -4px;
            }
        }

        .box {
            padding: 10px;
            flex: 1;

            .equipments-pond {
                height: 100px;
                width: 100px;
                margin: 0 auto 10px;

                canvas {
                    margin-left: 0;
                }
            }

            .box-list {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                &:nth-child(2) {
                    margin-bottom: 10px;
                }

                .box-item {
                    cursor: pointer;
                    flex: 1;

                    .num {
                        font-size: 20px;
                        color: #edf4ff;
                    }

                    .desc {
                        font-size: 14px;
                        color: #edf4ff;
                    }
                }
            }
        }
    }
}

.el-dialog :deep(.el-dialog__body) {
    overflow: hidden;
    /* 禁用dialog的滚动 */
}
</style>
